<template>
    <div>
        <!--这里是订单-->
        <div class="dingdanstyle">
            <button :class="{activdingdanstyle:1==dingdanstyle_l}" @click="dingdanstyle(1)">线上支付</button>
            <button :class="{activdingdanstyle:2==dingdanstyle_l}" @click="dingdanstyle(2)">线下支付</button>
        </div>
        <div v-if="1==dingdanstyle_l">
            <div class="nav-bar">
                <div class="same-box dingdan " :class="{red: ordertype==-1 }" @click="bus_order(-1)">
                    全部
                    <i class="icon "></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==0 }" @click="bus_order(0)">
                    未付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==1 }" @click="bus_order(1)">
                    已付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==2}" @click="bus_order(2)">
                    评价
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype==4 }" @click="bus_order(4)" v-show="false">
                    售后
                    <i class="icon"></i>
                </div>
            </div>
            <div class="data_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
                <ul class="ul_li">
                    <li v-for="itemorder in orderlist" :key="itemorder.orderId" style="margin-bottom:25px">
                        <div class="ul_li_head" id="boder" v-for="itemcom in itemorder.companyList" :key="itemcom.companyId">
                            <div class="xzicon" v-if="0==ordertype" v-show="false"></div>
                            <img :src="itemcom.companyHeadimg"><h1>
                                {{itemcom.companyName}}
                                <span v-if="1==itemorder.payStatus">已付款</span>
                                <span v-if="0==itemorder.payStatus">未付款</span>
                            </h1>
                            <div class="clearfix"></div>
                            <div class="ul_li_data" v-for="itemgood in itemcom.goodsList" :key="itemgood.goodsId">
                                <div class="ul_li_data_left" @click="orderdetailsHref(itemorder.orderId)" v-if="1==itemorder.payStatus">
                                    <img :src="itemgood.goodsThum">
                                </div>
                                  <div class="ul_li_data_left" v-else>
                                    <img :src="itemgood.goodsThum">
                                </div>
                                <div class="ul_li_data_right">
                                    <p style=" width: 201px; height: 19px;overflow: hidden;text-align: left;white-space: nowrap;text-overflow: ellipsis;">{{itemgood.goodsName}}</p>
                                    <h1 class="hhhh1">￥{{itemgood.goodsScreenPrice | amountMin100(2)}} <i style="color:black;padding-left:15px;">X{{itemgood.goodsNumber}}</i></h1>
                                </div>
                                <div class="clearfix"></div>
                                <div class="Subten" style="height:47px"  v-if="0==itemcom.orderStatus&&1==itemcom.payStatus" >
                                    <button  style="margin-top:-11px" @click="fahuo(itemcom.id)">立即发货</button>
                                </div>
                                <div class="Subten" v-if="1==itemcom.orderStatus" style="height: 42px">
                                    <button style="margin-top: -8px">已发货</button>
                                </div>
                                <div class="Subten" style="height: 42px" v-else-if="2==itemcom.orderStatus">
                                    <button v-show="false">已签收</button> 
                                    <button v-if="itemgood.evaluate==1" @click="pingjiaherf(itemgood.goodsId)" style="margin-top: -8px">查看评价</button>
                                    <button v-else style="margin-top: -8px">未评价</button>
                                </div>
                            </div>
                        </div>
                        <div class="money">
                            <h1>共{{itemorder.goodsNumber}}件商品 合计：<span>￥{{itemorder.companyList[0]["amount"] |amountMin100(2)}}</span></h1>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                </ul><loadingtmp :busy="busy" :datalength="orderlist.length" :loadall="loadall"></loadingtmp>
            </div>
        </div>
        <div v-else>
            <div class="nav-bar">
                <div class="same-box dingdan " :class="{red: ordertype_s==-1 }" @click="bus_order_st(-1)">
                    全部
                    <i class="icon "></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype_s==0 }" @click="bus_order_st(0)">
                    未付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype_s==1 }" @click="bus_order_st(1)">
                    已付款
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype_s==2}" @click="bus_order_st(2)" v-show="false">
                    待评价
                    <i class="icon"></i>
                </div>
                <div class="same-box dingdan" :class="{red: ordertype_s==4 }" @click="bus_order_st(4)" v-show="false">
                    售后
                    <i class="icon"></i>
                </div>
            </div>
           <div class="data_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="3">
                <div class="tab-content">
                    <div class="tab-content-in">
                        <ul class="list-ul fot_le">
                            <li class="list-li" v-for="(item,i) in orderlist1" :key="i">
                                <div class="left-img">
                                    <img :src="item.sysUser.headimgurl" alt="">
                                </div>
                                <div class="center-info">
                                    <h3 class="title">{{item.sysUser.companyName}}</h3>
                                    <p class="num" v-show="false">数量：1</p>
                                    <p class="price">总价：{{(item.order.price -item.order.score) | amountMin100}}</p>
                                    <p class="date">下单时间：{{item.order.ctime | formatDate('YYYY-MM-DD hh:mm:ss')}}</p>
                                    <p id="newp" v-if="item.order.remark!=''">付款留言:{{item.order.remark}}</p>
                                    <p v-else>付款留言:该用户暂无留言</p>
                                    <!-- <p v-else></p> -->
                                </div>
                                <div class="r-btn" v-show="false">提醒付款</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <loadingtmp :busy="busy" :datalength="orderlist1.length" :loadall="loadall"></loadingtmp>
            </div>
        </div>
        <business_footer :pageName="'busiOrder'"></business_footer>
    </div>
</template>
<style scoped>
    @import "../../../assets/business/css/order.css";
    @import "../../../assets/business/css/business_order.css";

    .hhhh1 {
        font-size: 14px;
        width: 68px;
        float: left;
        margin-top: 10px;
        color: red;
    }

    #boder {
        border-bottom: none;
    }
</style>
<script>
    import loadingtmp from '@/components/load/loading'
    import business_footer from "@/components/business_footer"
    export default {
        components: {
            business_footer,
            loadingtmp
        },
        data() {
            return {
                ordertype: this.$route.query.id,
                ordertype_s: -1,//线下
                orderlist: [],//线上
                dingdanstyle_l: 1,//状态
                orderlist1: [],//线下数组
                page: 1,
                pageSize: 3,
                busy: false,////////////
                loadall: false,
                comid: this.$route.query.comid,
                newpay:'',
                lesrem:''
            }
        }, created: function () {

        },
        methods: {
            initpage(){
                this.page =1
                this.loadall =false
                this.busy = false
                this.orderlist= []
                this.orderlist1 = []
            },
            pingjiaherf(iid){
                 this.$router.push({ name: "Commodity_details", query: { id:iid ,subid:0} })
            },
            fahuo:function(iid){//发货
               this.$http.put(this.APIURL_PREFIX + '/api/wap/updateShoppingOrder', $.param({ orderStatus: 1, id:iid})).then((response) => {
                    layer.msg("发货成功")
                    this.page=1;
                     this.loadMore()
                }).catch(function (err) {
                });
            },
            dingdanstyle: function (type) {
                this.initpage()
                this.dingdanstyle_l = type
                this.loadMore()
            },
            orderdetailsHref: function (orderId_id) {//跳转
                this.$router.push({ name: "orderdetails" ,query: { id: orderId_id ,type:2}})
            },
            bus_order: (function (ordertype) {//线上
                this.ordertype = ordertype;
                this.orderlist = []
                this.page = 1
                this.busy = false,////////////
                    this.loadall = false,
                    this.loadMore();
            }),
            bus_order_st: (function (type) {//线下
                this.ordertype_s = type
                this.orderlist1 = []
                this.page = 1
                this.busy = false,////////////
                    this.loadall = false,
                    this.loadMore();
            }),
            bus_order_list(flag) {//分页接口
                var vm = this;
                if (2 == this.dingdanstyle_l) {
                    var params = {}
                    params.page = this.page
                    params.pageSize = this.pageSize
                    if (-1 == this.ordertype_s) {

                    } else if (0 == this.ordertype_s) {
                        params.payStatus = 0
                    } else if (1 == this.ordertype_s) {
                        params.payStatus = 1
                    }
                    console.log(params.payStatus)
                    this.newpay=params.payStatus
                    console.log(this.newpay)
                    //   if(params.payStatus==''||params.payStatus==undefined||params.payStatus==0){
                    //       console.log('hide')
                    //         $('#newp').text('')
                    //   }else{
                    //       console.log('show')
                    //       $('#newp').show()
                    //   }
                    this.$http.get(this.APIURL_PREFIX + "/api/wap/company/localOrders", { params }).then((response) => {
                        this.lesrem=response.data.data.remark
                        if (flag) {
                            this.orderlist1 = this.orderlist1.concat(response.data.data);
                        } else {
                            this.orderlist1 = response.data.data;
                        }
                        if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                            this.busy = true;
                            this.loadall = true;
                        }
                        else {
                            this.busy = false;
                            this.page++
                        }
                    }).catch(function (err) {
                        console.log(err)
                    });
                } else {
                    var params = {}
                    params.page = vm.page
                    params.rows = vm.pageSize
                    params.companyId = vm.comid
                    if (0 == this.ordertype) {
                        params.payStatus = 0
                    } else if (1 == this.ordertype) {
                        params.payStatus = 1
                    } else if (2 == this.ordertype) {
                        params.orderStatus = 2
                    }
                    this.$http.get(this.APIURL_PREFIX + "/api/wap/selectForOrderCompany", { params }).then((response) => {
                        if (flag) {
                            this.orderlist = this.orderlist.concat(response.data.data);
                        } else {
                            this.orderlist = response.data.data;
                        }
                        if (0 == response.data.data.length || response.data.data.length < this.pageSize) {
                            this.busy = true;
                            this.loadall = true;
                        }
                        else {
                            this.busy = false;
                            this.page++
                        }
                    }).catch(function (err) {
                        console.log(err)
                    });
                }

            },
            loadMore() {
                this.busy = true;
                setTimeout(() => {
                    this.bus_order_list(this.page > 1);
                }, 500);
            },
        },
        mounted: function () {
            this.bus_order(this.ordertype);
        }
    }

</script>

